<template>
  <div class="profile-container">
    <div class="left-panel">
      <el-card class="profile-card" shadow="hover">
        <div class="profile-header">
          <div class="avatar-container">
            <el-avatar :size="100" :src="userInfo.avatar">
              <el-icon :size="40"><User /></el-icon>
            </el-avatar>
            <div class="status-badge">
              <el-tag type="success" effect="dark" round size="small">在线</el-tag>
            </div>
          </div>
          <h2 class="username">{{ userInfo.username }}</h2>
          <div class="role-tag">
            <el-tag :type="roleType" effect="light">{{ userInfo.role }}</el-tag>
          </div>
        </div>

        <el-divider>个人资料</el-divider>

        <div class="profile-details">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户ID">
              {{ userInfo.userId }}
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
              {{ formatDate(new Date()) }}
            </el-descriptions-item>
            <el-descriptions-item label="登录状态">
              <el-tag type="success">已登录</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="action-buttons">
          <el-button type="primary" round>
            <el-icon><Edit /></el-icon>编辑资料
          </el-button>
          <el-button type="warning" round>
            <el-icon><Lock /></el-icon>修改密码
          </el-button>
        </div>
      </el-card>
    </div>

    <div class="right-panel">
      <!-- 天气卡片 -->
      <el-card class="weather-card" shadow="hover">
        <div class="weather-content">
          <div class="weather-icon">
            <el-icon :size="40"><Sunny /></el-icon>
          </div>
          <div class="weather-info">
            <h3>北京市</h3>
            <div class="temperature">23°C</div>
            <div class="weather-desc">晴朗 / 优</div>
          </div>
        </div>
      </el-card>

      <!-- 日历卡片 -->
      <el-card class="calendar-card" shadow="hover">
        <div class="calendar-header">
          <h3>{{ currentMonth }}</h3>
        </div>
        <el-calendar v-model="currentDate" />
      </el-card>

      <!-- 名言卡片 -->
      <el-card class="quote-card" shadow="hover">
        <div class="quote-content">
          <i class="quote-mark">"</i>
          <p>{{ dailyQuote }}</p>
          <i class="quote-mark">"</i>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { User, Edit, Lock, Sunny } from '@element-plus/icons-vue'

const authStore = useAuthStore()
const currentDate = ref(new Date())

const userInfo = computed(() => ({
  username: authStore.userName,
  role: authStore.user?.role || '化神期强者',
  avatar: authStore.userAvatar,
  userId: authStore.userId
}))

const roleType = computed(() => {
  const roleMap = {
    'admin': 'danger',
    '管理员': 'danger',
    '普通用户': 'info'
  }
  return roleMap[userInfo.value.role] || 'info'
})

const currentMonth = computed(() => {
  return new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long' }).format(currentDate.value)
})

const dailyQuote = ref('生活是一场艺术创作，而你就是最好的艺术家。')

const formatDate = (date) => {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date)
}
</script>

<style scoped>
.profile-container {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 24px;
  padding: 24px;
  min-height: calc(100vh - 84px);
  background-color: var(--el-bg-color-page);
}

.left-panel {
  position: sticky;
  top: 24px;
  height: fit-content;
}

.profile-card {
  border: none;
  background: linear-gradient(145deg, #ffffff, #f6f8fc);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.profile-header {
  text-align: center;
  padding: 20px 0;
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.status-badge {
  position: absolute;
  bottom: 0;
  right: 0;
}

.username {
  margin: 12px 0;
  font-size: 24px;
  color: var(--el-text-color-primary);
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.right-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-content: start;
}

.weather-card {
  background: linear-gradient(135deg, #89f7fe, #66a6ff);
  color: white;
  border: none;
}

.weather-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.weather-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

.temperature {
  font-size: 32px;
  font-weight: 300;
  margin: 8px 0;
}

.calendar-card {
  background: white;
  border: none;
}

.calendar-header {
  text-align: center;
  margin-bottom: 16px;
}

.quote-card {
  background: linear-gradient(135deg, #f6d365, #fda085);
  color: white;
  border: none;
}

.quote-content {
  position: relative;
  padding: 24px;
  text-align: center;
  font-size: 18px;
  font-style: italic;
}

.quote-mark {
  font-size: 48px;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
  }
}

/* 动画效果 */
.profile-card,
.weather-card,
.calendar-card,
.quote-card {
  transition: transform 0.3s ease;
}

.profile-card:hover,
.weather-card:hover,
.calendar-card:hover,
.quote-card:hover {
  transform: translateY(-5px);
}
</style>

